import React, { Component } from 'react';
import { View, StyleSheet, FlatList, ScrollView } from 'react-native';
import { connect } from 'react-redux';
import { actions } from 'bee/redux/IndexRedux';
import { Icons, SearchBar, Banner, ProductItem } from 'bee/components/Sales';
import { px2dp } from 'bee/utils/px2dp';
// import { createTabNavigator } from 'react-navigation';
import Tabs from 'bee/components/Tabs';
import { colors, sizes } from 'bee/themes';
import { Icon, Names } from 'bee/components/Icon';

// const RouteConfig = {};
// @flow
type Props = {
  navigation: Object,
  fetchIndexData: Function,
  data: object,
};

const Separator = () => <View style={{ height: px2dp(20) }} />;
class Sales extends Component<Props> {
  componentDidMount() {
    this.props.fetchIndexData();
  }

  renderItem({ item }) {
    return <ProductItem data={item} />;
  }

  render() {
    const {
      isFetching,
      isError,
      carousels,
      navs,
      acciList,
      allList,
      healthList,
      life,
      moneyList,
    } = this.props.data;

    return (
      <ScrollView style={{ flex: 1 }}>
        {isError ? <Text>Error</Text> : null}
        {isFetching ? (
          <View>
            <Banner slides={carousels} />
            <Icons icons={navs} navigation={this.props.navigation} />

            <View style={styles.searchView}>
              <SearchBar
                placeholder="搜索险种"
                onPress={() => {
                  this.props.navigation.navigate('Search');
                }}
              />
              {/* <Text style={styles.serviceIcon} /> */}
              <View style={{ marginLeft: px2dp(20) }}>
                <Icon
                  name={Names.zaixiankefu}
                  color={colors.white}
                  size={sizes.f4}
                />
              </View>
            </View>

            <View style={styles.tabsCon}>
              <Tabs
                tabNames={['全部', '理财', '健康', '意外', '寿险']}
                containerStyle={styles.tabCon}
                selectedTabStyle={styles.selectTab}
                defaultTextStyle={styles.defaultText}
                selectedTextStyle={styles.selectTabText}
              >
                <FlatList
                  data={allList}
                  renderItem={this.renderItem}
                  ItemSeparatorComponent={Separator}
                />

                <FlatList
                  data={allList}
                  renderItem={this.renderItem}
                  ItemSeparatorComponent={Separator}
                />
                <FlatList
                  data={moneyList}
                  renderItem={this.renderItem}
                  ItemSeparatorComponent={Separator}
                />
                <FlatList
                  data={healthList}
                  renderItem={this.renderItem}
                  ItemSeparatorComponent={Separator}
                />
                <FlatList
                  data={acciList}
                  renderItem={this.renderItem}
                  ItemSeparatorComponent={Separator}
                />
                <FlatList
                  data={life}
                  renderItem={this.renderItem}
                  ItemSeparatorComponent={Separator}
                />
              </Tabs>
            </View>
          </View>
        ) : null}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  searchView: {
    position: 'absolute',
    width: '100%',
    top: px2dp(57),
    paddingLeft: px2dp(80),
    paddingRight: px2dp(60),
    flexDirection: 'row',
    alignItems: 'center',
  },
  // serviceIcon: {
  //   marginLeft: px2dp(10),
  //   fontFamily: 'iconfont',
  //   fontSize: px2dp(36),

  //   // 以下临时
  //   width: px2dp(36),
  //   height: px2dp(36),
  //   backgroundColor: '#efa',
  // },
  tabCon: {
    height: px2dp(80),
    alignItems: 'center',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#bfbfbf',
    backgroundColor: colors.white,
  },
  selectTab: {
    borderBottomWidth: px2dp(4),
    borderBottomColor: colors[1001],
  },
  selectTabText: {
    fontSize: sizes.f3,
    color: colors[1001],
  },
  defaultText: {
    fontSize: sizes.f2,
    color: colors[1101],
  },
  tabsCon: {
    marginTop: px2dp(20),
    // backgroundColor: colors.white,
  },
});

const mapStateToProps = state => ({ data: state.index });

const mapDispatchToProps = dispatch => ({
  fetchIndexData: () => dispatch(actions.requestData),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Sales);
